<script setup>
import SearchBox from '@/components/SearchBox.vue'
import search_item from './components/search_item.vue'
import { ref, reactive } from 'vue'

// 头部标签页的数据
const activeHead = ref('area')
const show_search_item = ref(true)
const areaList = reactive([
  '不限',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇',
  '黄江镇',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇',
  '大岭山镇',
  '长安镇',
  '塘厦镇',
  '凤岗镇'
])
const cityList = reactive([
  '全国',
  '北京',
  '上海',
  '广州',
  '深圳',
  '杭州',
  '石家庄'
])
const subwayList = reactive(['1号线', '2号线', '3号线', '4号线', '17号线北段'])
const Job_Type = ref('')
const options = reactive([
  {
    value: '1',
    label: '不限'
  },
  {
    value: '2',
    label: '不限'
  },
  {
    value: '3',
    label: '不限'
  },
  {
    value: '4',
    label: '不限'
  }
])

// 底部标签页的数据
const activeFooter = ref('occupation')
const occupationList = reactive([
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘'
])
const hot_cityList = reactive([
  '北京招聘',
  '北京招聘',
  '北京招聘',
  '北京招聘',
  '石家庄招聘',
  '北京招聘'
])
const enterpriseList = reactive([
  '华为',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动'
])
const nearbyList = reactive([
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息'
])

// 页面滚动隐藏
window.addEventListener('scroll', function () {
  if (window.scrollY > 150) {
    // 当页面滚动超过100像素时执行的代码
    show_search_item.value = false
  } else {
    show_search_item.value = true
  }
})
</script>

<template>
  <div class="center">
    <el-affix :offset="20">
      <el-card class="cardStyle">
        <el-row :gutter="300">
          <el-col :span="14"><SearchBox style=""></SearchBox></el-col>
          <el-col :span="10">
            <el-button class="btn" type="primary" :dark="isDark" plain>
              <el-icon :size="size" :color="color"> <DArrowRight /> </el-icon>
              登录, 查看更多岗位
            </el-button>
          </el-col>
        </el-row>
        <el-tabs v-if="show_search_item" v-model="activeHead">
          <el-tab-pane label="城市和区域" name="area">
            <el-row>
              <div style="padding: 10px">
                <el-space wrap>
                  <el-button
                    v-for="(item, index) in cityList"
                    :key="index"
                    link
                    color="#00bebd"
                    class="active_btn"
                  >
                    {{ item }}
                  </el-button>
                </el-space>
              </div>
            </el-row>
            <el-row>
              <div class="area">
                <el-row>
                  <el-space wrap>
                    <el-button
                      v-for="(item, index) in areaList"
                      :key="index"
                      link
                      color="#00bebd"
                      class="active_btn"
                    >
                      {{ item }}
                    </el-button>
                  </el-space>
                </el-row>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="地铁" name="subway">
            <el-row>
              <div style="padding: 10px">
                <el-space wrap>
                  <el-button
                    v-for="(item, index) in subwayList"
                    :key="index"
                    link
                    color="#00bebd"
                    class="active_btn"
                  >
                    {{ item }}
                  </el-button>
                </el-space>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <el-row>
          <div style="padding-top: 10px; width: 100%">
            <el-row :gutter="10">
              <el-col :span="3">
                <el-select v-model="Job_Type" placeholder="职业类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="Job_Type" placeholder="求职类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-row>
      </el-card>
    </el-affix>
    <!-- 职业列表 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <search_item></search_item>
        <search_item></search_item>
        <search_item></search_item>
        <search_item></search_item>
        <search_item></search_item>
        <search_item></search_item>
        <search_item></search_item>
        <search_item></search_item>
        <!-- 这是分页 -->
        <div style="margin: auto; width: 100%">
          <el-pagination
            style="margin: 0 auto; width: 500px"
            background
            layout="prev, pager, next"
            :total="1000"
            page-size="20"
          />
        </div>
        <!-- 底部 -->
        <el-card class="cardStyle" shadow="never">
          <el-tabs
            v-model="activeFooter"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="热门职业" name="occupation">
              <el-row>
                <div style="padding: 0px">
                  <el-space wrap>
                    <el-button
                      v-for="(item, index) in occupationList"
                      :key="index"
                      link
                      color="#00bebd"
                      class="active_btn"
                    >
                      {{ item }}
                    </el-button>
                  </el-space>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="热门城市" name="hot_city">
              <el-row>
                <div style="padding: 0px">
                  <el-space wrap>
                    <el-button
                      v-for="(item, index) in hot_cityList"
                      :key="index"
                      link
                      color="#00bebd"
                      class="active_btn"
                    >
                      {{ item }}
                    </el-button>
                  </el-space>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="热门企业" name="enterprise">
              <el-row>
                <div style="padding: 0px">
                  <el-space wrap>
                    <el-button
                      v-for="(item, index) in enterpriseList"
                      :key="index"
                      link
                      color="#00bebd"
                      class="active_btn"
                    >
                      {{ item }}
                    </el-button>
                  </el-space>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="附近城市" name="nearby">
              <el-row>
                <div style="padding: 0px">
                  <el-space wrap>
                    <el-button
                      v-for="(item, index) in nearbyList"
                      :key="index"
                      link
                      color="#00bebd"
                      class="active_btn"
                    >
                      {{ item }}
                    </el-button>
                  </el-space>
                </div>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="6">
        
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.center {
  // text-align: center;
  margin: auto;

  .cardStyle {
    margin: 20px 50px;
  }

  .btn {
    width: 200px;
    height: 61px;
    padding: 5px 20px;
    font-size: 16px;
    margin-left: 100px;
  }

  .active_btn {
    :hover {
      color: #409eff;
    }
  }

  .area {
    width: 100%;
    background-color: #f8f8f8;
    padding: 10px;
  }
}
</style>
